<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		  <!-- Bootstrap 3.3.6 -->
		  <link rel="stylesheet" href="/static/adminlte/bootstrap/css/bootstrap.min.css">
		  <!-- Theme style -->
		  <link rel="stylesheet" href="/static/adminlte/dist/css/AdminLTE.min.css">
		  <link rel="stylesheet" href="/static/zTree/css/metroStyle/metroStyle.css">
		<title></title>
	</head>
	<body>

<section class="content">
      <div class="row">
		<div class="col-xs-12">
		          <div class="nav-tabs-custom">
		            <ul class="nav nav-tabs">
		              <li><a href="{{ route('admin.role.index') }}">角色</a></li>
		              <li><a href="{{ route('admin.role.add') }}">添加角色</a></li>
		              <li class="active"><a>授权</a></li>
		            </ul>
		            <div class="tab-content">    
						<ul id="tree" class="ztree"></ul>
					    <input type="hidden" id="group_id" name="id" value="{{ $id }}">
					    <button type="button" id="auth-btn" class="btn btn-primary">授权</button>		    		
		            </div><!-- /.tab-content -->
		          </div><!-- /.nav-tabs-custom -->
		</div><!--/.row-->
      </div>
  </section>

<!-- jQuery 2.2.3 -->
<script src="/static/adminlte/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/static/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/adminlte/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/zTree/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        var _id = $("#group_id").val();
        var tree = $("#tree");
        var zTree;

        // zTree 配置项
        var setting = {
            check: {
                enable: true,
//              chkStyle: "checkbox",
//              chkboxType: { "Y": "", "N": "" }
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                showIcon: false,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootpid: ""
                },
                key: {
                    name: "title"
                }
            }
        };
        
        $.ajax({
            url: "{{ route('admin.role.auth') }}",
            type: "post",
            dataType: "json",
            cache: false,
			data:{
				id:{{ $id }},
				_token:"{{csrf_token()}}"
			},
            success: function (data) {
                zTree = $.fn.zTree.init(tree, setting, data);
            }
        });

        /**
         * 授权提交
         */
        $("#auth-btn").on("click", function () {
            var checked_ids,auth_rule_ids = [];
            checked_ids = zTree.getCheckedNodes(); // 获取当前选中的checkbox
            $.each(checked_ids, function (index, item) {
                auth_rule_ids.push(item.id);
            });
            console.log(auth_rule_ids);
            console.log(_id);
            $.ajax({
                url: "{{ route('admin.role.upauth') }}",
                type: "post",
                cache: false,
                data: {
                    id: _id,
                    auth_rule_ids: auth_rule_ids,
                    _token:"{{csrf_token()}}"
                },
                success: function (data) {
                    if(data.code === 1){
                        setTimeout(function () {
                            location.href = data.url;
                        }, 1000);
                    }
                    layer.msg(data.msg);
                }
            });
        });
    });
</script>
	</body>
</html>
